<template>
  <div class="learning_beauty">
    <div class="second_nav">
      <router-link to="/beautyMovie">
        <p class="second_nav_item">美丽视频</p>
      </router-link>
      <router-link to="/learningBeauty">
        <p class="second_nav_item">女神日记</p>
      </router-link>
    </div>
    <div class="foundation_block">
      <img src="../../images/mainOne/learningBeauty/IMG_bianmeixue_01.png" />
      <p class="description">今日推荐 &nbsp;&nbsp;底妆全靠它 春日幻彩</p>
    </div>
    <div class="foundation_block">
      <img src="../../images/mainOne/learningBeauty/IMG_bianmeixue_02.png" />
      <p class="description">今日推荐 &nbsp;&nbsp;女生必备——CLINIQUE</p>
    </div>
    <div class="foundation_block">
      <img src="../../images/mainOne/learningBeauty/IMG_bianmeixue_03.png" />
      <p class="description">今日推荐 &nbsp;&nbsp;底妆全靠它 春日幻彩</p>
    </div>
  </div>
</template>
<script>
export default {
  name: "goddess"
}
</script>
<style lang="less" scoped>
.learning_beauty {
  width: 710/75rem;
  margin: 0 auto;
  box-shadow: 0 0 15px #ccc;
  background: #fff;
  border-radius: 15px;
  margin-top: -130/75rem;
  margin-bottom: 200/75rem;
  .second_nav {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    a {
      color: #808080;
      .second_nav_item {
        margin-top: 20/75rem;
        flex-grow: 1;
        font-size: 30/75rem;
        text-align: center;
        line-height: 100/75rem;
      }
    }
    .router-link-exact-active {
      .second_nav_item {
        color: #ff406f;
      }
    }
  }
  .foundation_block {
    img {
      width: 670/75rem;
      height: 320/75rem;
      margin: 0 auto;
    }
    .description {
      width: 670/75rem;
      margin: 0 auto;
      font-size: 30/75rem;
      line-height: 60px;
      margin-bottom: 25/75rem;
    }
  }
}
</style>
